<template>
    <div class="input_box">
        <input type="text" placeholder="请输入任务名称"  v-model="taskName">
        <span @click="handleClick" >新增</span>
    </div>
</template>

<script>
export default {
    data(){
        return{
            taskName:'',
        }
    },
    methods:{
        handleClick(){
            if(this.taskName){
                // 调用数据仓库中的同步方法addTask，新增一个任务，并保存数据仓库中的state.tasklist中
                this.$store.commit('addTask',this.taskName);
                this.taskName=''; //清空输入框
            }else{
                alert('请输入任务名称')
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .input_box{
        display: flex;
        justify-content: space-between;
        align-items: center;
        input{
            flex: 1;
            height: 40px;
            border: none;
            outline: none;
            padding-left: 20px;
            background: #f5f5f5;
            border-radius: 10px;
        }
        span{
            width: 60px;
            text-align: center;
            color:lightgreen;
        }
    }
</style>